<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>注册</title>
		<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
		<style type="text/css">
			*{
				box-sizing: border-box;
				padding: 0;
				margin: 0;
			}
			.visible{
				visibility: visible !important;
			}
			.green{
				color: #41b53b !important;
			}
			.show{
				display: block !important;
			}
			.hide{
				display: none !important;
			}
			.white{
				color: #fff !important;
			}
			.circle-bg-green{
				background-position: 1px -200px !important;
			}
			.validate-sended{
				opacity: 0.7 !important;
				color: #F0F0F0 !important;
			}
			.processed{
				background-position: 0px 0px !important;
			}
			.disabled{
				cursor: not-allowed !important;
			}
			#register-container #register-authority{
				display: inline-block;
				padding: 0 5px;
				font-size: 12px;
				background-color: #fff;
				color: #c0c0c0;
				transform: translateY(48px);
			}
			#register-container{
				margin: 5vh auto;
				width: 370px;
				text-align: center;
				padding-bottom: 40px;
				border-bottom: 1px solid #f0f0f0;
			}
			#register-container input:focus{
				border-radius: 5px;
			}
			#register-logo{
				width: 200px;
			}
			#register-container #process-box{
				display: flex;
				justify-content: space-between;
				width: 100%;
				margin-top: 30px;
				position: relative;
			}
			#process-box .process-items{
				width: 80px;
				height: 60px;
			}
			#process-box .process-items .process-circle{
				display: inline-block;
				height: 24px;
				color: #ccc;
				width: 24px;
				font-size: 12px;
				line-height: 24px;
				/*border-radius: 50%;
				border: 0.5px solid #ccc;*/
				background: url('images/register-img/reg-icon.png') no-repeat;
				background-position: -45px -200px;		
				margin: 0 auto 0 auto;
			}
			.process-items .process-name{
				margin-top: 10px;
				font-size: 13px;
				color: #999;
				text-align: center;
			}
			#register-container #register-phone-box{
				width: 100%;
				height: 50px;
				margin-top: 35px;
				position: relative;
			}
			#register-container #register-phone-box .phone-icon{
				width: 16px;
				height: 16px;
				position: absolute;
				right: 10px;
				top: 17px;
			}
			#register-container #register-phone-box #true{
				background-image: url('images/register-img/icon.png');
				background-position: 0px -117px;
			}
			#register-container #register-phone{
				border-radius: 5px;
				border: 0.5px solid #999;
				width: 100%;
				height: 100%;
				padding-left: 115px;
				font-size: 15px;
			}
			#register-container #register-phone:focus{
                outline: 0;
                box-shadow: 0 0 5px rgba(105,142,191,.4);
                border: 1px solid #b0c4dd;
            }
			#register-container #validate-box{
				width: 100%;
				height: 50px;
				position: relative;
				text-align: left;
				margin-top: 5px;
			}
			#validate-box #validate-name{
				position: absolute;
				left: 15px;
				top: 15px;
				letter-spacing: 2px;
				font-size: 15px;
				color: #3C3C3C;
			}
			#register-phone-box #phone-name{
				position: absolute;
				left: 15px;
				top: 15px;
				letter-spacing: 7px;
				font-size: 15px;
				color: #3C3C3C;
			}
			#register-container #register-validate{
				width: 60%;
				height: 100%;
				padding-left: 115px;
				font-size: 15px;
				border-radius: 5px;
				border: 0.5px solid #ccc;
				float: left;
			}
			#register-container #register-validate:focus{
                outline: 0;
                box-shadow: 0 0 5px rgba(105,142,191,.4);
                border: 1px solid #b0c4dd;
            }
			#register-container #register-acquire-validate{
				width: 38%;
				height: 100%;
				border: none;
				color: #fff;
				letter-spacing: 2px;
				cursor: pointer;
				border-radius: 5px;
				background-color: #41b53b;
				float: right;
			}
			#register-container #register-acquire-validate:hover{
				opacity: 0.8;
			}
			#register-container #stepOne-nextStep{
				width: 100%;
				border: 0.5px solid #777;
				height: 50px;
				text-align: center;
				line-height: 50px;
				letter-spacing: 5px;
				font-size: 15px;
				border: none;
				background-color: #41b53b;
				color: #fff;
				cursor: pointer;
				margin-top: 30px;
				border-radius: 5px;
				transition: all 0.35s;
			}
			#register-container #stepOne-nextStep:hover{
				opacity: 0.8;
			}
			#step-two #stepTwo-register{
				width: 100%;
				border: 0.5px solid #777;
				height: 50px;
				text-align: center;
				line-height: 50px;
				letter-spacing: 5px;
				font-size: 15px;
				border: none;
				background-color: #41b53b;
				color: #fff;
				cursor: pointer;
				margin-top: 30px;
				border-radius: 5px;
				transition: all 0.35s;
			}
			#step-two #stepTwo-register:hover{
				opacity: 0.8;
			}
			#register-container #login-tips-box{
				width: 100%;
				overflow: hidden;
				margin-top: 10px;
			}
			#register-container #login-tips{
				float: right;
				font-size: 13px;
				color: #777;
			}
			#register-container #goBack{
				float: left;
				font-size: 13px;
				color: #777;
			}
			#register-container #login{
				color: #41b53a;
				text-decoration: none;
				cursor: pointer;
			}
			#register-container #login:hover{
				text-decoration: underline;
			}
			#register-container .arrow{
				position: absolute;
			}
			#register-container #arrow-one{
				height: 10px;
				width: 113px;
				left: 57px;
				top: 8px;
				background-image: url('images/register-img/reg-icon.png');
				background-position: -15px -100px;
			}
			#register-container #arrow-two{
				height: 10px;
				width: 113px;
				left: 203px;
				top: 8px;
				background-image: url('images/register-img/reg-icon.png');
				background-position: -15px -100px;
			}
			#register-container #phone-error{
				text-align: left;
				visibility: hidden;
			}
			#register-container #phone-error #error-icon{
				display: inline-block;
				height: 16px;
				width: 16px;
				vertical-align: text-bottom;
				background-image: url('images/register-img/icon.png');
				background-position: -17px -100px;
			}
			#register-container #phone-error #error-text{
				color: #f91;
				font-size: 12px;
			}
			#register-container #validate-tips{
				text-align: left;
				visibility: hidden;
			}
			#register-container #validate-tips #tips-icon{
				display: inline-block;
				height: 16px;
				width: 16px;
				vertical-align: text-bottom;
				background-image: url('images/register-img/icon.png');
				background-position: 0px -100px;
			}
			#register-container #validate-tips #tips-text{
				color: #d5d5d5;
				font-size: 12px;
			}
			
			
			
			
			/*step two*/
			#register-container .step-two-items{
				width: 100%;
				height: 50px;
				margin-top: 25px;
				position: relative;
			}
			#register-container .step-two-items input:focus{
				outline: 0;
                box-shadow: 0 0 5px rgba(105,142,191,.4);
                border: 0.5px solid #b0c4dd !important;
			}
			#register-container .step-two-items .true-icon{
				width: 16px;
				height: 16px;
				position: absolute;
				right: 10px;
				top: 17px;
			}
			#register-container .step-two-items #true{
				background-image: url('images/register-img/icon.png');
				background-position: 0px -117px;
			}
			#register-container #username-input{
				border-radius: 5px;
				border: 0.5px solid #ccc;
				width: 100%;
				height: 100%;
				padding-left: 125px;
				font-size: 15px;
			}
			#register-container #step-two #psw-input{
				border-radius: 5px;
				border: 0.5px solid #ccc;
				width: 100%;
				height: 100%;
				padding-left: 125px;
				font-size: 15px;
			}
			#step-two #set-psw-input{
				border-radius: 5px;
				border: 0.5px solid #ccc;
				width: 100%;
				height: 100%;
				padding-left: 125px;
				font-size: 15px;
			}
			#register-container #step-two #ensure-psw-input{
				border-radius: 5px;
				border: 0.5px solid #ccc;
				width: 100%;
				height: 100%;
				padding-left: 125px;
				font-size: 15px;
			}
			#step-two-validate-box{
				text-align: left;
			}
			#step-two-validate-box #validate-input{
				border-radius: 5px;
				border: 0.5px solid #ccc;
				width: 60%;
				height: 100%;
				padding-left: 125px;
				font-size: 15px;
			}
			#step-two-validate-box #validate-img{
				width: 35%;
				float: right;
				height: 100%;
				cursor: pointer;	
			}
			#step-two-education-occupation-box {
				text-align: left;
			}
			
			#step-two-education-occupation-box #education-box{
				display: inline-block;
				position: relative;
				border-radius: 5px;
				width: 45%;
				height: 100%;
				color: #3C3C3C;
				text-align: left;
				font-size: 15px;
				line-height: 50px;
			}
			#step-two-education-occupation-box #education-name{
				display: inline-block;
				border: 0.5px solid #ccc;
				border-bottom-left-radius: 5px;
				border-top-left-radius: 5px;
				border-right: none;
				width: 50%;
				height: 100%;
				padding-left: 15px;
				color: #3C3C3C;
				letter-spacing: 10px;
				text-align: left;
				font-size: 15px;
			}
			#step-two-education-occupation-box #education-select{
				border-bottom-right-radius: 5px;
				border-top-right-radius: 5px;
				float: right;
				width: 50%;
				height: 100%;
				padding-left: 10px;
				font-size: 15px;
				border: 0.5px solid #ccc;
			}
			
			#step-two-education-occupation-box #occupation-box{
				float: right;
				display: inline-block;
				position: relative;
				border-radius: 5px;
				width: 45%;
				height: 100%;
				color: #3C3C3C;
				text-align: left;
				font-size: 15px;
				line-height: 50px;
			}
			#step-two-education-occupation-box #occupation-name{
				display: inline-block;
				border: 0.5px solid #ccc;
				border-bottom-left-radius: 5px;
				border-top-left-radius: 5px;
				border-right: none;
				width: 50%;
				height: 100%;
				padding-left: 15px;
				color: #3C3C3C;
				letter-spacing: 10px;
				text-align: left;
				font-size: 15px;
			}
			#step-two-education-occupation-box #occupation-select{
				border-bottom-right-radius: 5px;
				border-top-right-radius: 5px;
				float: right;
				width: 50%;
				height: 100%;
				padding-left: 10px;
				font-size: 15px;
				border: 0.5px solid #ccc;
			}
			#step-two-education-occupation-box select option{
				padding-top: 5px;
				padding-bottom: 5px;
			}			
			.step-two-items #username-label{
				position: absolute;
				left: 15px;
				top: 14px;
				letter-spacing: 17px;
				font-size: 15px;
				color: #3C3C3C;
			}
			#step-two #validate-label{
				position: absolute;
				left: 15px;
				top: 14px;
				letter-spacing: 15px;
				font-size: 15px;
				color: #3C3C3C;
			}
			.step-two-items #set-psw-label{
				position: absolute;
				left: 15px;
				top: 14px;
				letter-spacing: 7px;
				font-size: 15px;
				color: #3C3C3C;
			}
			.step-two-items #ensure-psw-label{
				position: absolute;
				left: 15px;
				top: 14px;
				letter-spacing: 7px;
				font-size: 15px;
				color: #3C3C3C;
			}
			.step-two-items#interested-name-box{
				text-align: left;
			}
			.step-two-items #interested-name{
				display: inline-block;
				border: 0.5px solid #ccc;
				border-radius: 5px;
				width: 25%;
				height: 100%;
				line-height: 50px;
				padding-left: 15px;
				color: #3C3C3C;
				letter-spacing: 10px;
				text-align: left;
				font-size: 15px;
				
			}
			#register-container #stepOne-nextStep{
				width: 100%;
				border: 0.5px solid #777;
				height: 50px;
				text-align: center;
				line-height: 50px;
				letter-spacing: 5px;
				font-size: 15px;
				border: none;
				background-color: #41b53b;
				color: #fff;
				cursor: pointer;
				margin-top: 30px;
				border-radius: 5px;
				transition: all 0.35s;
			}
			#register-container #stepOne-nextStep:hover{
				opacity: 0.8;
			}
			#register-container #login-tips-box{
				width: 100%;
				overflow: hidden;
				margin-top: 10px;
			}
			#register-container #login-tips{
				float: right;
				font-size: 13px;
				color: #777;
			}
			#register-container #login{
				color: #41b53a;
				text-decoration: none;
				cursor: pointer;
			}
			#register-container #login:hover{
				text-decoration: underline;
			}
			#register-container .arrow{
				position: absolute;
			}
			#register-container #arrow-one{
				height: 10px;
				width: 113px;
				left: 57px;
				top: 8px;
				background-image: url('images/register-img/reg-icon.png');
				background-position: -15px -100px;
			}
			#register-container #arrow-two{
				height: 10px;
				width: 113px;
				left: 203px;
				top: 8px;
				background-image: url('images/register-img/reg-icon.png');
				background-position: -15px -100px;
			}
			#step-two #interested{
				margin-top: 5px;
			}
			#interested p{
				text-align: left;	
			}
			#interested p select{
				padding: 5px 0 5px 10px;
				border-radius: 5px;
				width: 32%;
			}
			#step-two #username-box{
				position: relative;
			}
			#step-two #username-warn{
				visibility:  hidden;
				height: 16px;
				width: 100%;
			}
			#step-two .warn-icon{
				display: inline-block;
				height: 16px;
				width: 16px;
				margin-right: 5px;
				vertical-align: top;
				background-image: url('images/register-img/icon.png');
				background-position: -17px -117px;
			}
			#step-two .warn-txt{
				display: inline-block;
				height: 100%;
				color: #f91;
				vertical-align: top;
				font-size: 12px;
			}
			#step-two .warning-box{
				position: absolute;	
				visibility: hidden;
				text-align: left;
				height: 16px;
				width: 100%;
				top: 52px;
				left: 0px;
			}
			
			/*step-three*/
			#step-three{
				width: 100%;
				height: 400px;
				text-align: center;
			}
			#step-three #register-success-box{
				height: 70px;
				width: 100%;
				text-align: left;
				margin-top: 60px;
				margin-bottom: 60px;
			}
			#step-three #register-success-txt{
				display: inline-block;
				float: right;
				height: 70px;
				line-height: 70px;
				text-align: center;
			}
			#step-three #success-img{
				display: inline-block;
				height: 100%;
				width: 70px;
				background-image: url('images/register-img/icon.png');
				background-position: -100px -50px;
			}
			@media only screen and (min-width: 360px) and (max-width: 400px) {
				#register-container{
					width: 360px;
				}
				#register-container #arrow-one{
					width: 90px;
					background-position: 10px -40px;
				}
				#register-container #arrow-two{
					width: 90px;
					left: 200px;
					background-position: 10px -40px;
				}
				.step-two-items #interested-name{
					letter-spacing: 5px;
				}
			}
			@media only screen and (min-width: 320px) and (max-width: 359px) {
				#register-container{
					width: 320px;
				}
				#process-box .process-items{
					width: 65px;
				}
				#register-container #stepOne-nextStep{
					margin-top: 10px;
				}
				#register-container #process-box{
					margin: 2vh auto;
					margin-top: 10px;
				}
				#register-container #arrow-one{
					left: 50px;
					width: 90px;
					background-position: 10px -40px;
				}
				#register-container #arrow-two{
					width: 90px;
					left: 177px;
					background-position: 10px -40px;
				}
				.step-two-items #interested-name{
					letter-spacing: 5px;
				}
				#register-container #register-validate{
					padding-left: 95px;
				}
				#validate-box #validate-name{
					left: 5px;
				}
				#register-container #register-phone{
					padding-left: 95px;
				}
				#register-phone-box #phone-name{
					left: 5px;
				}
				#step-two-validate-box #validate-input{
					padding-left: 95px;
				}
				#step-two #validate-label{
					letter-spacing: 10px;
				}
				#step-two-education-occupation-box #occupation-box{
					width: 53%;
				}
				#step-three #register-success-txt{
					font-size: 25px;
				}
				#step-three {
					height: 200px;
				}
			}
			
		</style>
		
	</head>
	<body>
		<div id="register-container">
			<img id="register-logo" src="images/login-img/agritech cloud.jpg"/>
			
			<div id="process-box">
				<div class="process-items" id="process-one">
					<span class="process-circle white circle-bg-green">1</span>
					<p class="process-name green">验证手机号</p>
				</div>
				
				<div class="arrow" id="arrow-one"></div>
				
				<div class="process-items" id="process-two">
					<span class="process-circle">2</span>
					<p class="process-name">填写帐号信息</p>
				</div>
				
				<div class="arrow" id="arrow-two"></div>
				
				<div class="process-items" id="process-three">
					<span class="process-circle">3</span>
					<p class="process-name">注册成功</p>
				</div>
			</div>
			
			<div id="step-one">
				<div id="register-phone-box">
					<label for="register-phone" id="phone-name">手机号码</label>
					<input type="text" placeholder="请输入手机号" maxlength="11" id="register-phone"/>
					<i class="phone-icon hide" id="true"></i>
				</div>
				
				<div id="phone-error">
					<i id="error-icon"></i>
					<span id="error-text">
						
					</span>
				</div>
				
				<div id="validate-box">
					<label for="register-validate" id="validate-name">手机验证码</label>
					<input type="text" disabled="disabled" placeholder="请输入验证码" maxlength="6" id="register-validate"/>
					<input type="button"  value="获取验证码" id="register-acquire-validate"/>
				</div>
				
				<div id="validate-tips">
					<i id="tips-icon"></i>
					<span id="tips-text">
						验证码已发送，120秒内输入有效
					</span>
				</div>
				
				<input type="button"  value="下一步" id="stepOne-nextStep"/>
				
				<div id="login-tips-box">
					<p id="login-tips">已有帐号？<a href="login.html" id="login">我要登陆</a></p>
				</div>
			</div>
			
			<div id="step-two" class="hide">
				<div class="step-two-items" id="username-box">
					<label for="username-input" id="username-label">用户名</label>
					<input type="text" placeholder="请输入用户名" maxlength="16" id="username-input"/>
					<i class="true-icon hide" id="true"></i>
					<div id="username-warn" class="warning-box"><i class="warn-icon"></i><span class="warn-txt" id="username-warn-txt"></span></div>
				</div>
				
				<div class="step-two-items" id="set-psw-box">
					<label for="psw-input" id="set-psw-label">设置密码</label>
					<input type="password" placeholder="请输入6-16位数字、字母组合密码" maxlength="16" id="set-psw-input"/>
					<i class="true-icon hide" id="true"></i>
					<div id="set-psw-warn" class="warning-box"><i class="warn-icon"></i><span class="warn-txt" id="set-psw-warn-txt"></span></div>
				</div>
				
				<div class="step-two-items" id="ensure-psw-box">
					<label for="ensure-psw-input" id="ensure-psw-label">确认密码</label>
					<input type="password" placeholder="请再次输入密码" maxlength="16" id="ensure-psw-input"/>
					<i class="true-icon hide" id="true"></i>
					<div id="ensure-warn" class="warning-box"><i class="warn-icon"></i><span class="warn-txt" id="ensure-warn-txt"></span></div>
				</div>
				
				<div class="step-two-items" id="step-two-education-occupation-box">
					<div id="education-box">
						<label for="education-select" id="education-name">学历</label>
						<select name="study" id="education-select">
							<option value="中专">中专</option>
							<option value="大学">大学</option>
							<option value="硕士">硕士</option>
							<option value="博士">博士</option>
						</select>
					</div>
					
					<div id="occupation-box">
						<label for="occupation-select" id="occupation-name">职业</label>	
						<select name="study" id="occupation-select">
							<option value="种植员">种植员</option>
							<option value="养殖员">养殖员</option>
							<option value="运输员">运输员</option>
						</select>
					</div>
				</div>
				
				<div class="step-two-items" id="interested-name-box">
					<label for="interested" id="interested-name">感兴趣</label>
				</div>

				<div id="interested">
					<p>
						<select class="province" data-value="浙江省" data-first-title="选择省" disabled="disabled"></select>
						<select class="city" data-value="杭州市" data-first-title="选择市" disabled="disabled"></select>
						<select class="area" data-value="西湖区" data-first-title="选择地区" disabled="disabled"></select>
					</p>
				</div>


				<div class="step-two-items" id="step-two-validate-box">
					<label for="validate-input" id="validate-label">验证码</label>
					<input type="text" placeholder="请输入验证码" maxlength="4" id="validate-input"/>
					<img src="" id="validate-img"/>
					<div id="validate-warn" class="warning-box"><i class="warn-icon"></i><span class="warn-txt" id="validate-warn-txt"></span></div>
				</div>
				
				
				<input type="button"  value="注册" id="stepTwo-register"/>
				
				<div id="login-tips-box">
					<a href="register.html" id="goBack"><<回到第一步</a>
					<p id="login-tips">已有帐号？<a href="login.html" id="login">我要登陆</a></p>
				</div>
			</div>
			
			<div id="step-three" class="hide">
				<div id="register-success-box"><i id="success-img"></i><h1 id="register-success-txt">恭喜您！注册成功！</h1></div>
				<a href="login.html" id="login-immediately" class="green">立刻登陆</a>
			</div>
			
			<span id="register-authority">
				版权©智慧农业创新团队
			</span>
		</div>
		
		
		
		<canvas id="canvas" width="" height=""></canvas>
		
	
	
	<!--逻辑-->
	<script type="text/javascript">
		//step-one
		(function  () {
			var acqValid = document.querySelector('#register-acquire-validate');
			var txtInput = document.querySelector('#register-phone');
			var validate = document.querySelector('#register-validate');
			var timer = null;
			
			var stepOne = document.querySelector("#step-one");
			var stepTwo = document.querySelector('#step-two');
			
			//processTwo
			var arrowOne = document.querySelector('#arrow-one');
			var arrowTwo = document.querySelector('#arrow-two');
			var processTwo = document.querySelector('#process-two');
			var processTwoChild = processTwo.children;
			
			var phoneE = document.querySelector('#phone-error');
			var errorTxt = phoneE.querySelector('#error-text');
			var validateTips = document.querySelector('#validate-tips');
			var regExp = /^1([358][0-9]|4[579]|66|7[0135678]|9[89])[0-9]{8}$/;
			var keyupFunction = function  () {
									if (txtInput.value == '') {
										phoneE.classList.remove('visible');
										txtInput.removeEventListener('keyup',keyupFunction);
									}
								};
			
			txtInput.addEventListener('keyup',function  () {
				trueIcon.classList.add('hide');
			})
			
			acqValid.addEventListener('click',function  () {
				if (txtInput.value == '') {
					phoneE.classList.add('visible');
					errorTxt.innerText = '请输入手机号';
				} else if (!phoneE.classList.contains('visible')) {
					
					//已发送验证码
					var i = 120;		
					this.value = i + 's后重新获取';
					this.classList.add('validate-sended','disabled');
					this.setAttribute('disabled','disabled');
					validate.removeAttribute('disabled');
					validateTips.classList.add('visible');
					validate.focus();
					
					
					timer = setInterval(function  () {
						i--;
						if ( i == 0) {
							acqValid.value = '获取验证码';
							acqValid.classList.remove('validate-sended','disabled');
							acqValid.removeAttribute('disabled');
							validateTips.classList.remove('visible');
							clearInterval(timer);
							return;
						}
						acqValid.value = i + 's后重新获取';
					},1000)
					
				}
			});
			
			txtInput.addEventListener('focus',function  () {
				if (phoneE.classList.contains('visible')) {
					if (errorTxt.innerText == '请输入手机号') {
						phoneE.classList.remove('visible');
					} else{
						txtInput.addEventListener('keyup',keyupFunction);
					}
				}
			})
			
			txtInput.addEventListener('blur',function  () {
				if ( txtInput.value != '' && !(regExp.test(txtInput.value)) ) {
					phoneE.classList.add('visible');
					errorTxt.innerText = '格式错误';
				}
				if (regExp.test(txtInput.value)) {
					trueIcon.classList.remove('hide');
					phoneE.classList.remove('visible');
				}
			})
			
			//手机号输入框的小图标
			var trueIcon = document.querySelector('#true');
			
			//下一步
			var nextStep = document.querySelector('#stepOne-nextStep');
			nextStep.addEventListener('click',function  () {
				if (validate.value.match(/^[ ]*$/)) {
					alert('验证码不能为空');
					validate.focus();
				} else if (!validate.value.match(/^[a-zA-Z\d]{6}$/)) {
					alert('请输入6位有效验证码');
					validate.value = '';
					validate.focus();
				} else {
					
					//跳到step-two
					acqValid.value = '获取验证码';
					acqValid.classList.remove('validate-sended','disabled');
					acqValid.removeAttribute('disabled');
					validateTips.classList.remove('visible');
					validateTips.classList.remove('visible');
					clearInterval(timer);
					
					stepOne.classList.add('hide');
					stepTwo.classList.remove('hide');
					
					//改变process进展颜色
					arrowOne.style.backgroundPositionY = '-130px';
					processTwoChild[0].style.cssText = "background-position-x: 0px;color: #fff;";
					processTwoChild[1].classList.add('green');
					
					//适配移动端
					if (document.body.clientWidth <= 400) {
						arrowOne.style.backgroundPositionY = '-70px';
					}
				}
			})
		})();
		
		
		
		
		//step two
		(function  () {
			var bool = false;	//记录 再次输入密码 是否触发过blur事件；
			
			//用户名输入验证
			(function  () {
				var useInp = document.querySelector('#username-input');
				var useWarnBox = document.querySelector('#username-warn');
				var useWarnTxt = document.querySelector('#username-warn-txt');
				useInp.addEventListener('blur',function  () {
					if (useInp.value.length == '') {
						useWarnTxt.innerText = '用户名长度不能为空';
						useWarnBox.classList.add('visible');
					} else if (!useInp.value.match(/^[0-9a-zA-Z\u4e00-\u9fa5_]{1,16}$/)) {
						useWarnTxt.innerText = '用户名只能为汉字、数字、字母、下划线组合';
						useWarnBox.classList.add('visible');
					} else {
						useWarnBox.parentNode.querySelector('#true').classList.remove('hide');
					}
				})
				useInp.addEventListener('focus',function  () {
					useWarnBox.classList.remove('visible');
					useWarnBox.parentNode.querySelector('#true').classList.add('hide');
				});
			})();
			
			//设置密码输入验证
			(function  () {
				var setPswInp = document.querySelector('#set-psw-input');
				var setPswWarn = document.querySelector('#set-psw-warn');
				var ensurePswInp = document.querySelector('#ensure-psw-input');
				var ensurePswBox = document.querySelector('#ensure-psw-box');
				setPswInp.addEventListener('blur',function  () {
					if (!this.value.match(/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/)) {
						setPswWarn.querySelector('#set-psw-warn-txt').innerText = '密码格式错误';
						setPswWarn.classList.add('visible');
					} else {
						setPswWarn.parentNode.querySelector('#true').classList.remove('hide');
					};
					
					//判断是否已填过 确认密码
					if (bool) {
						if (ensurePswInp.value != setPswInp.value) {
							ensurePswBox.querySelector('#ensure-warn-txt').innerText = '密码不一致';
							ensurePswBox.querySelector('#ensure-warn').classList.add('visible');
							ensurePswBox.querySelector('#true').classList.add('hide');
						} else{
							ensurePswBox.querySelector('#true').classList.remove('hide');
							ensurePswBox.querySelector('#ensure-warn').classList.remove('visible');
						}
					}
				})
				setPswInp.addEventListener('focus',function  () {
					setPswWarn.parentNode.querySelector('#true').classList.add('hide');
					setPswWarn.classList.remove('visible');
				});
			})();
			
			//确认密码验证
			(function  () {
				var setPswInp = document.querySelector('#set-psw-input');
				var ensurePswInp = document.querySelector('#ensure-psw-input');
				var ensurePswBox = document.querySelector('#ensure-psw-box');
				ensurePswInp.addEventListener('blur',function  () {
					bool = true;
					if (this.value != setPswInp.value) {
						ensurePswBox.querySelector('#ensure-warn-txt').innerText = '密码不一致';
						ensurePswBox.querySelector('#ensure-warn').classList.add('visible');
					} else{
						ensurePswBox.querySelector('#true').classList.remove('hide');
					}
				});
				ensurePswInp.addEventListener('focus',function  () {
					ensurePswBox.querySelector('#ensure-warn').classList.remove('visible');
					ensurePswBox.querySelector('#true').classList.add('hide');
				})
			})();
			
			//验证码输入验证
			(function  () {
				var validateBox = document.querySelector('#step-two-validate-box');
				var validateInp = validateBox.querySelector('#validate-input');
				validateInp.addEventListener('blur',function  () {
					if (this.value.match(/^[ ]*$/)) {
						this.value = '';
						validateBox.querySelector('#validate-warn-txt').innerText = '验证码不能为空'
						validateBox.querySelector('#validate-warn').classList.add('visible');
					}
				})
				validateInp.addEventListener('focus',function  () {
					validateBox.querySelector('#validate-warn').classList.remove('visible');
				})
			})();
			
			//注册按钮
			(function  () {
				var nextStep = document.querySelector('#stepTwo-register');
				var useTrue = document.querySelector('#username-box #true');
				var setPswTrue = document.querySelector('#set-psw-box #true');
				var ensPswTrue = document.querySelector('#ensure-psw-box #true');
				var validateWarn = document.querySelector('#step-two-validate-box #validate-warn');
				var stepTwo = document.querySelector('#step-two');
				var stepThree = document.querySelector('#step-three');
				var arrowTwo = document.querySelector('#arrow-two');
				var processThreeBox = document.querySelector('#process-three');
				var processThreeChild = processThreeBox.children;
				nextStep.addEventListener('click',function  () {
					if ( useTrue.classList.contains('hide') || setPswTrue.classList.contains('hide') || ensPswTrue.classList.contains('hide') || validateWarn.classList.contains('visible')) {
						alert('信息填写出错');
					} else{
						
						//注册成功
						stepTwo.classList.add('hide');
						stepThree.classList.remove('hide');
						
						//改变process进展颜色
						arrowTwo.style.backgroundPositionY = '-130px';
						processThreeChild[0].style.cssText = "background-position-x: 0px;color: #fff;";
						processThreeChild[1].classList.add('green');
						
						//适配移动端
						if (document.body.clientWidth <= 400) {
							arrowTwo.style.backgroundPositionY = '-70px';
						}
					}
				})
			})();
		
		})();
		
		
		
	</script>	
	
	<!--背景-->	
	<script type="text/javascript">
		var can = document.getElementById('canvas');
		    can.style.cssText="position:absolute;left:0px;top:0px;z-index:-1;";
//		var w = can.width = window.innerWidth;
//		var h = can.height = window.innerHeight;
		var w = can.width = document.body.clientWidth;
		var h = can.height = window.innerHeight;
		window.onresize = function(){
		    w = can.width = document.body.clientWidth;
		    h = can.height = window.innerHeight;
		}
		var ctx = can.getContext('2d');
		/*canvas基本使用方法*/
		/*ctx.beginPath();
		ctx.arc(200,200,50,0,Math.PI*2,false);
		ctx.fillStyle='red';
		ctx.fill();*/
		var centerX = w/2;
		var centerY = h/2;
		can.addEventListener('mousemove',function(ev){
		    var even = ev || window.event;
		    centerX = even.pageX;
		    centerY = even.pageY;
		},true);
		can.addEventListener('mouseout',function(ev){
		    centerX = w/2;
		    centerY = h/2;
		},true);
		function Dot(){
		    this.x = Math.random()*w;
		    this.y = Math.random()*h;
		    this.r = Math.random()*5;
		    this.vx = -0.5 + Math.random()*0.8;
		    this.vy = -0.5 + Math.random()*0.8;
		    this.color = '#e6eaea';
		    //this.color = randomColor();
		}
		function randomColor(){
		    var r = Math.floor(Math.random()*256);
		    var g = Math.floor(Math.random()*256);
		    var b = Math.floor(Math.random()*256);
		    return "rgb("+r+","+g+","+b+")";
		}
		Dot.prototype.draw = function(){
		    ctx.beginPath();
		    ctx.fillStyle = this.color;
		    ctx.arc(this.x,this.y,this.r,0,Math.PI*2,false);
		    ctx.fill();
		    this.line();
		    this.update();
		}
		Dot.prototype.update = function(){
		      
		    this.x += this.vx;
		    this.y += this.vy;
		    if(this.x<0||this.x>w)
		        this.vx = -this.vx;
		    if(this.y<0||this.y>h)
		        this.vy = -this.vy;
		    
		}
		Dot.prototype.line = function(){
		    var statie = 50;
		    var round = 60;
		    var lineRound = 60;
		    ctx.beginPath();
		    ctx.strokeStyle = '#f0f0f0';
		    
		    if(Math.abs(this.x-(centerX+statie))<round&&Math.abs(this.y-centerY)<round){
		        ctx.moveTo(this.x,this.y);//落笔
		        ctx.lineTo(centerX+lineRound,centerY);
		        ctx.stroke();
		
		    }
		    if(Math.abs(this.x-(centerX-statie))<round&&Math.abs(this.y-centerY)<round){
		        ctx.moveTo(this.x,this.y);//落笔
		        ctx.lineTo(centerX-lineRound,centerY);
		        ctx.stroke();
		    }
		    if(Math.abs(this.x-centerX)<round&&Math.abs(this.y-(centerY+statie))<round){
		        ctx.moveTo(this.x,this.y);//落笔
		        ctx.lineTo(centerX,centerY+lineRound);
		        ctx.stroke();
		    }
		    if(Math.abs(this.x-centerX)<round&&Math.abs(this.y-(centerY-statie))<round){
		        ctx.moveTo(this.x,this.y);//落笔
		        ctx.lineTo(centerX,centerY-lineRound);
		        ctx.stroke();
		    }
		    if(Math.abs(this.x-(centerX-statie))<round&&Math.abs(this.y-(centerY-statie))<round){
		        ctx.moveTo(this.x,this.y);//落笔
		        ctx.lineTo(centerX-lineRound,centerY-lineRound);
		        ctx.stroke();
		    }
		    if(Math.abs(this.x-(centerX+statie))<round&&Math.abs(this.y-(centerY+statie))<round){
		        ctx.moveTo(this.x,this.y);//落笔
		        ctx.lineTo(centerX+lineRound,centerY+lineRound);
		        ctx.stroke();
		    }
		    if(Math.abs(this.x-(centerX+statie))<round&&Math.abs(this.y-(centerY-statie))<round){
		        ctx.moveTo(this.x,this.y);//落笔
		        ctx.lineTo(centerX+lineRound,centerY-lineRound);
		        ctx.stroke();
		    }
		    if(Math.abs(this.x-(centerX-statie))<round&&Math.abs(this.y-(centerY+statie))<round){
		        ctx.moveTo(this.x,this.y);//落笔
		        ctx.lineTo(centerX-lineRound,centerY+lineRound);
		        ctx.stroke();
		    }
		    
		}
		var dots = [];
		var num = 500;
		for(var i = 0 ; i<num ; i++){
		    var oDot = new Dot();
		    dots.push(oDot);
		}
		setInterval(function(){
		    ctx.clearRect(0,0,w,h);
		    for(var i = 0 , len = dots.length ; i<len ; i++){
		        dots[i].draw();
		    }
		
		},1000/60);
	</script>
	
	<script type="text/javascript" src="js/jquery.min.js"></script>
	<script type="text/javascript" src="js/jquery.cxselect.min.js"></script>
	<script type="text/javascript">
		$.cxSelect.defaults.url = 'js/cityData.min.json';

		$('#city_china').cxSelect({
			selects: ['province', 'city', 'area']
		});

		$('#interested').cxSelect({
			selects: ['province', 'city', 'area'],
			nodata: 'none'
		});

		$('#global_location').cxSelect({
			url: 'js/globalData.min.json',
			selects: ['country', 'state', 'city', 'region'],
			nodata: 'none'
		});

		$('#city_custom').cxSelect({
			selects: ['first', 'second', 'third', 'fourth', 'fifth'],
			required: true,
			url: [{
					'v': 1,
					'n': '第一级 >',
					's': [{
						'v': 2,
						'n': '第二级 >',
						's': [{
							'v': 3,
							'n': '第三级 >',
							's': [{
								'v': 4,
								'n': '第四级 >',
								's': [{
									'v': 5,
									'n': '第五级 >',
									's': [{
										'v': 6,
										'n': '第六级 >',
										's': [{
											'v': 7,
											'n': '第七级 >',
											's': [{
												'v': 8,
												'n': '第八级 >',
												's': [{
													'v': 9,
													'n': '第九级 >',
													's': [{
														'v': 10,
														'n': '第十级'
													}]
												}]
											}]
										}]
									}]
								}]
							}]
						}]
					}]
				},
				{
					'v': 'Number',
					'n': '数字 >',
					's': [{
							'v': 'Dice',
							'n': '骰子 >',
							's': [{
									'v': 'Small',
									'n': '小',
									's': [{
											'n': '4'
										},
										{
											'n': '5'
										},
										{
											'n': '6'
										},
										{
											'n': '7'
										},
										{
											'n': '8'
										},
										{
											'n': '9'
										},
										{
											'n': '10'
										}
									]
								},
								{
									'v': 'Big',
									'n': '大',
									's': [{
											'n': '11'
										},
										{
											'n': '12'
										},
										{
											'n': '13'
										},
										{
											'n': '14'
										},
										{
											'n': '15'
										},
										{
											'n': '16'
										},
										{
											'n': '17'
										}
									]
								}
							]
						},
						{
							'v': 'Hundred',
							'n': '百位',
							's': [{
									'n': '100'
								},
								{
									'n': '200'
								},
								{
									'n': '300'
								},
								{
									'n': '400'
								},
								{
									'n': '500'
								},
								{
									'n': '600'
								},
								{
									'n': '700'
								},
								{
									'n': '800'
								},
								{
									'n': '900'
								}
							]
						},
						{
							'v': 'Thousand',
							'n': '千位',
							's': [{
									'n': '1000'
								},
								{
									'n': '2000'
								},
								{
									'n': '3000'
								},
								{
									'n': '4000'
								},
								{
									'n': '5000'
								},
								{
									'n': '6000'
								},
								{
									'n': '7000'
								},
								{
									'n': '8000'
								},
								{
									'n': '9000'
								}
							]
						}
					]
				},
				{
					'v': 'ABC',
					'n': '字母 >',
					's': [{
							'v': 'Upper case',
							'n': '大写 >',
							's': [{
									'n': 'A'
								},
								{
									'n': 'B'
								},
								{
									'n': 'C'
								},
								{
									'n': 'D'
								},
								{
									'n': 'E'
								},
								{
									'n': 'F'
								},
								{
									'n': 'G'
								}
							]
						},
						{
							'v': 'Lower case',
							'n': '小写 >',
							's': [{
									'n': 'a'
								},
								{
									'n': 'b'
								},
								{
									'n': 'c'
								},
								{
									'n': 'd'
								},
								{
									'n': 'e'
								},
								{
									'n': 'f'
								},
								{
									'n': 'g'
								}
							]
						}
					]
				},
				{
					'v': 'Boolean',
					'n': '真假 >',
					's': [{
							'v': true,
							'n': '真 (Ture)'
						},
						{
							'v': false,
							'n': '假 (False)'
						},
						{
							'v': 1,
							'n': '真 (1)'
						},
						{
							'v': 0,
							'n': '假 (0)'
						}
					]
				},
				{
					'n': '无子级'
				}
			]
		});
	</script>

	</body>
</html>
